<template>
    <div class="form-control" :style="{ '--translateX': needTranslateX ? '-40px' : '0px' }">
        <input :type="props.type" required="true" :value="modelValue"
            @input="(val: any) => { emit(`update:modelValue`, val.target.value) }" />
        <label>
            <span :style="`transition-delay:${50 * index}ms`" :class="{ 'hidden': qsr.includes(item) }"
                v-for="(item, index) in label" :key="index">{{ item }}</span>
        </label>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue"
const emit = defineEmits(["update:modelValue"])
const qsr = ref(["请", "输", "入"])
// const error = ref(false)
const props = defineProps({
    placeholder: {
        type: String
    },
    modelValue: {
        type: String
    },
    type: {
        type: String,
        default: "text"
    }
})
const needTranslateX = ref(props.placeholder?.indexOf("请输入") !== -1)
console.log(needTranslateX.value);
const label = computed(() => {
    return props.placeholder?.split("") || []
})

</script>
<style lang="scss" scoped>
.form-control {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    $red: #BD3039;
    $white: #fff;
    $focus_color: #808D8C;
    $font_border_color: $white;
    $translateX: var(--translateX, "-48px");

    input {
        background-color: transparent;
        border: 0;
        border-bottom: 1px $font_border_color solid;
        display: block;
        padding: 10px 10px;
        font-size: 18px;
        box-sizing: border-box;
        color: #fff;
        width: 100%;
    }

    input:focus,
    input:valid {
        outline: 0;
        border-bottom-color: $focus_color;
    }

    label {
        position: absolute;
        top: 15px;
        left: 0;
        pointer-events: none;
        margin: 0 10px;
    }

    label span {
        display: inline-block;
        font-size: 16px;
        min-width: 5px;
        color: rgb(106, 106, 106);
        transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    input:focus+label span,
    input:valid+label span {
        color: $focus_color;
        transform: translate($translateX, -30px);
        font-size: 13px;
    }



    input:focus+label .hidden,
    input:valid+label .hidden {
        opacity: 0;
    }
}
</style>